<template>
	<ge-page id="ge-page" >
		<!-- <van-search shape="round" @search="search" placeholder="搜索" :value="searchValue" /> -->
		 
		<van-tabs v-model:active="active"  @change="onTabsChange" >
		  <van-tab title="按日统计"> 
		    
			<view class="order-statistics">
				<!-- <scroll-view scroll-y="true" scroll-x="true" style="height: calc(100vh - 400rpx);" @scrolltolower="onMore">
					<view class="cont-one" v-for="item in list" :key="item.order_id">
						<view class="order-num">
							<view class="">
								<span class="order-no">订单号：</span><span class="order-word">{{item.order_no}}</span>
							</view>
							<span class="order-status">{{item.state_text}}</span> 
						</view>
					</view>
				</scroll-view> -->
				<view class="header">
				      <text class="column-title">统计时间</text>
				      <text class="column-title">外卖单</text>
				      <text class="column-title">堂食单</text>  
				      <text class="column-title">总金额</text>  
				</view> 
				<scroll-view class="scroll-container"  scroll-y="true" show-scrollbar="false" style="height: calc(100vh - 400rpx);" @scrolltolower="onMore">
				  <view class="order-item" v-for="(item, index) in list" :key="item.order_id">  
				    <text class="column-data">{{item.date}}</text>  
				    <text class="column-data">{{item.waimai}}</text>  
				    <text class="column-data">{{item.tangshi}}</text>  
				    <text class="column-data  amount">￥{{item.price}}</text>  
				  </view>  
				</scroll-view> 
				
		    </view>
		</van-tab>
		  <van-tab title="按月统计">
			  <view class="order-statistics">  
			      <view class="header">  
			            <text class="column-title">统计时间</text>  
			            <text class="column-title">外卖单</text>  
			            <text class="column-title">堂食单</text>  
			            <text class="column-title">总金额</text>  
			      </view> 
			      <scroll-view class="scroll-container" scroll-y="true" show-scrollbar="false" style="height: calc(100vh - 400rpx);" @scrolltolower="onMore">  
			        <view class="order-item" v-for="(item, index) in list" :key="item.order_id">
			          <text class="column-data">{{item.date}}</text>  
			          <text class="column-data">{{item.waimai}}</text>  
			          <text class="column-data">{{item.tangshi}}</text>  
			          <text class="column-data  amount">￥{{item.price}}</text>  
			        </view> 
			      </scroll-view>  
			    </view>  
		  </van-tab>
		</van-tabs>
	</ge-page>
</template>

<script>

	import {
		storageKey,
		appConfig
	} from '@/constant/config';
	const token = uni.getStorageSync(storageKey.token) || null;
	export default {
		data() {
			return {
				active:1,
				searchValue: '',
				query: {
					page: 1
				},
				list: [],
				dataType: 0,
				isMore: false,
				orderStatistics: [  
				        { time: '2023-04-01', takeout: 5, dinein: 3, total: 200.5 },  
				        { time: '2023-04-02', takeout: 7, dinein: 2, total: 350.0 },  
				        { time: '2023-04-03', takeout: 4, dinein: 4, total: 400.8 },  
				        // 更多数据...  
				      ]  
			}
		},
		onLoad(option) {
			 
		},
		created() { 
			   this.fetchOrder();
		}, 
		methods: {
			search(e) {
				this.searchValue = e.detail;
				this.query = {
					searchValue: this.searchValue
				};
				this.list = [];
				this.fetchOrder();
			},
			onTabsChange(e) { 
				// 初始化
				this.dataType = e.detail.name;
				this.searchValue = '';
				this.list = [];
				this.query = { page: 1 };
				this.fetchOrder();
			},
			onMore() {
				console.log(11)
				if (this.isMore) {
					const page = this.query.page || 1;
					this.query = {
						...this.query,
						page: page + 1
					}
					this.fetchOrder();
				}
			},
			  
			fetchOrder() {
				const query = {
					...this.query,
					//searchType: -1, // 默认查询字段'订单号'
					page: this.query.page || 1,
					//orderSource: -1,
					//deliveryType: -1,
					//payMethod: null,
				}
				
				uni.api.getOrderStatistics({ dataType: this.dataType, ...query }).then(res => {
					if (res.list.current_page === res.list.last_page) {
						this.isMore = false;
					} else {
						this.isMore = true;
					}
					this.list = [...this.list, ...(res.list.data || [])];
				})
			},
			 
		}
	}
</script>

<style scoped lang="scss"> 
.order-statistics {  
  padding: 10px;  
}  
  
.header {  
  display: flex;  
  justify-content: space-around; /* 或者使用 flex-start 根据需要 */  
  align-items: center;  
  background-color: #f8f8f8;  
  padding: 10px 0;  
  font-weight: bold;  
}  
  
.column-title, .column-data {  
  flex: 1; /* 使得每个标题和数据项占据相等的空间 */  
  text-align: center; /* 文本居中对齐 */  
  font-size: 14px;  
  color: #333;  
  padding: 0 5px; /* 根据需要调整内边距 */  
}  
  
.scroll-container {  
  display: flex; /* 使得子元素（order-item）成为flex项目 */  
  overflow-x: auto; /* 允许水平滚动 */  
  -webkit-overflow-scrolling: touch; /* 优化移动端滑动性能 */  
  padding: 0 10px; /* 容器内边距 */  
}  
  
.order-item {  
  display: flex;  
  align-items: center; /* 子项垂直居中对齐 */  
  background-color: #fff;  
  margin-bottom: 10px; /* 列表项之间的间隔 */  
}  
  
.amount {  
  font-weight: bold; /* 金额可以加粗显示 */  
}
</style>